<template>
    <view class="container">
        <u-sticky :zIndex="1" bgColor="#ffffff">
            <u-tabs
                :list="grabItem"
                lineColor="#000000"
                lineWidth="69rpx"
                lineHeight="4rpx"
                activeStyle="font-size: 26rpx;color: #1B1B1B;line-height: 37rpx;"
                inactiveStyle="font-size: 26rpx;color: #7F7F7F;line-height: 37rpx;"
                itemStyle="flex: 1;height: 100rpx;border-bottom: 1px solid #EEEEEE;"
                :current="tabsIndex"
				:scrollable="false"
                @change="handleChange"
            ></u-tabs>
        </u-sticky>
        <view class="grab-ul">
            <block v-if="grabOrderList.length > 0">
                <grab-item v-for="item in grabOrderList" :key="item.id" :grab="item" class="grab-item"></grab-item>
            </block>
            <u-empty
                mode="data"
                width="400rpx"
                height="400rpx"
                icon="https://img.ionepin.com/dcfe6ae6d90104cbc50c50dd6010c1f8eabee5a3.png"
                class="empty"
                v-else
            >
            </u-empty>
            <u-loadmore
                height="50rpx"
                :status="loadStatus"
                v-if="total > 8"
                marginTop="40rpx"
                marginBottom="20rpx"
                fontSize="32rpx"
                iconSize="34rpx"
                line
            />
        </view>
    </view>
</template>

<script>
    import GrabItem from "@/components/GrabItem"
    import { getGrabOrderPage } from "@/config/api"
    export default {
        name: "index",
        components: {
            GrabItem
        },
        data() {
            return {
                loading: true,
                grabItem: [
                    {
                        name: "全部",
                        state: null
                    },
                    {
                        name: "待抽签",
                        state: "wait"
                    },
                    {
                        name: "待付款",
                        state: "win"
                    },
                    {
                        name: "已完成",
                        state: "complete"
                    }
                ],
                tabsIndex: 0,
                listQuery: {
                    page: 1,
                    list_rows: 10,
                    state: null
                },
                total: 0,
                grabOrderList: []
            }
        },
        computed: {
            loadStatus() {
                if (this.total > this.grabOrderList.length) {
                    return "loading"
                } else {
                    return "nomore"
                }
            }
        },
        onLoad() {
          this.getData()
        },
        onReachBottom() {
            if (this.total > this.grabOrderList.length) {
                this.listQuery.page += 1
                this.getData(true)
            }
        },
        methods: {
            handleChange(item) {
                this.listQuery.state = item.state
                this.listQuery.page = 1
                this.getData()
            },
            async getData(more = false) {
                if (!more) {
                    uni.showLoading({
                        title: "加载中..."
                    })
                }
                const res = await getGrabOrderPage(this.listQuery)
                if (more) {
                    this.grabOrderList = [...this.grabOrderList, ...res.items]
                } else {
                    this.grabOrderList = res.items
                }
                this.total = res.total
                if (!more) {
                    uni.hideLoading()
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        .grab-item {
            margin-top: 40rpx;
        }
        .grab-ul {
            padding-bottom: 10rpx;
            .empty {
                padding: 50rpx 0;
            }
        }
    }
</style>
